<template>
  <div>
    <el-card class="box-card">
      <div class="header">
        <div v-for="(item, index) in data" :key="index" class="box">
          <div class="top">
            <span>{{ item }}</span>
          </div>
          <div class="title">
            <span>{{ filter(index) }}</span>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div id="chartData" style="height: 400px;" />
    </el-card>
  </div>
</template>

<script>
import { dataAPI } from '@/api/chart'
import chartsObj from '@/utils/constant/charts'
import * as echarts from 'echarts'
export default {
  name: 'MyChart',
  data() {
    return {
      data: {}
    }
  },
  computed: {

  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const { data: res } = await dataAPI()
      // console.log(res)
      this.data = res.data
      this.initial(res.data)
    },
    // 枚举
    filter(val) {
      // console.log(val)
      const obj = chartsObj.data.find(v => v.id === val).value
      return obj
    },
    // 数据转换
    initial(obj) {
      const myChart = echarts.init(document.querySelector('#chartData'))
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: Object.keys(obj).map(key => ({ name: key, value: obj[key] }))
          }
        ]
      }
      myChart.setOption(option)
    }

  }
}
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 20px;
}

.header {
  display: flex;
  justify-content: space-between;

  .box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .top {
      width: 120px;
      height: 120px;
      border: 3px solid #008000;
      border-radius: 50%;
      text-align: center;
      line-height: 120px;
    }

    .title {
      margin-top: 5px;
    }
  }
}
</style>

